<template>
  <el-button type="primary" @click="add">录入线索</el-button>
  <el-button type="success" @click="importExcel">导入线索(Excel)</el-button>
  <el-button type="danger" @click="batchDel" v-hasAuth="'clue:delete'">批量删除</el-button>

  <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动"/>
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼"/>
    <el-table-column property="phone" label="手机" width="120"/>
    <el-table-column property="weixin" label="微信" width="120"/>
    <el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
    <el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
    <el-table-column property="intentionProductDO.name" label="意向产品"/>
    <el-table-column property="stateDO.typeValue" label="线索状态"/>
    <el-table-column property="sourceDO.typeValue" label="线索来源"/>
    <el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)" v-hasAuth="'clue:delete'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="page"
        @next-click="page"
        @current-change="page"/>
  </p>

  <!--线索导入（Excel）的弹窗（对话框）-->
  <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" :center="true" :draggable="true">
    <el-upload
        ref="uploadRef"
        method="post"
        :http-request="uploadFile"
        :auto-upload="false">
      <template #trigger>
        <el-button type="primary">选择Excel文件</el-button>
        &nbsp;仅支持后缀名为.xls或.xlsx的文件
      </template>
      <template #tip>
        <div class="el-upload__tip">
          <p>重要提示：</p>
          <ul>
            <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
            <li>给定Excel文件的第一行将视为字段名；</li>
            <li>请确认您的文件大小不超过50MB；</li>
            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
          </ul>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importExcelDialogVisible = false">关 闭</el-button>
        <el-button type="success" @click="submitUpload">上 传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {doDelete, doGet, doPost} from "@/http/httpRequest";
import {messageConfirm, messageTip} from "@/util/util";

export default {
  name: "ClueView",

  //注入reload
  inject : ['reload'],

  data() {
    return {
      //线索列表对象，初始值是空
      clueList : [{
        ownerDO : {},
        activityDO : {},
        appellationDO : {},
        needLoanDO : {},
        intentionStateDO : {},
        intentionProductDO : {},
        stateDO : {},
        sourceDO : {}
      }],
      //分页时每页显示多少条数据
      pageSize : 0,
      //总共有多少条
      total : 0,
      //线索导入的弹窗，false不弹出来，true就弹出来
      importExcelDialogVisible : false,
      //线索id的数组，初始值是空
      clueIdArray : []
    }
  },

  mounted() {
    this.getData(1);
  },

  methods : {
    //current表示当前是查第几页
    getData(current) {
      doGet("/api/clue", {
        current : current //前面的current是参数名，后面的current是参数值
      }).then(resp => {
        if (resp.data.code === 200) {
          this.clueList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数
    page(value) { //value就是要查询的那一页的页码
      this.getData(value);
    },

    //线索导入（Excel）
    importExcel() {
      this.importExcelDialogVisible = true;
    },

    //Excel上传到后台
    submitUpload() {
      this.$refs.uploadRef.submit();
    },

    //真正的上传Excel文件
    uploadFile(param) {
      console.log(param);
      let fileObj = param.file // 相当于input里取得的files
      let formData = new FormData() // new一个FormData对象
      formData.append('file', fileObj)//文件对象，前面file是参数名，后面fileObj是参数值
      doPost("/api/importExcel", formData).then(resp => {
        if (resp.data.code === 200) {
          //Excel导入成功，提示一下
          messageTip("导入成功", "success");
          //清理一下上传的文件
          this.$refs.uploadRef.clearFiles();
          //页面刷新
          this.reload();
        } else {
          //Excel导入失败，提示一下
          messageTip("导入失败，原因：" + resp.data.msg, "error");
        }
      })
    },

    //录入线索
    add() {
      this.$router.push("/dashboard/clue/add");
    },

    //编辑
    edit(id) {
      this.$router.push("/dashboard/clue/edit/" + id);
    },

    //根据id删除线索
    del(id) {
      //提示用户，您确定要删除该数据吗？
      messageConfirm("您确定要删除该数据吗？").then(() => { //点“确定”就执行then()函数
        doDelete("/api/clue/" + id, {}).then(ttt => {
          //then里面取结果，这个结果对象可以使用任何名字，不一定要使用过resp，我们此处使用的就是ttt
          if (ttt.data.code === 200) {
            messageTip("删除成功", "success");
            //刷新一下，局部刷新
            this.reload();
          } else {
            messageTip("删除失败，原因：" + ttt.data.msg, "error");
          }
        })
      }).catch(() => { //点“取消”就执行catch()函数
        messageTip("取消删除", "warning");
      })
    },

    //批量删除
    batchDel() {
      if (this.clueIdArray.length <= 0) {
        //没有选择数据，提示一下用户
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      //提示用户，您确定要删除这些数据吗？
      messageConfirm("您确定要删除这些数据吗？").then(() => { //点“确定”就执行then()函数
        // ids = "1,3,5,6,11,13,16";
        let ids = this.clueIdArray.join(",");
        doDelete("/api/clue", {
          ids : ids
        }).then(ttt => {
          //then里面取结果，这个结果对象可以使用任何名字，不一定要使用过resp，我们此处使用的就是ttt
          if (ttt.data.code === 200) {
            messageTip("批量删除成功", "success");
            //刷新一下，局部刷新
            this.reload();
          } else {
            messageTip("批量删除失败，原因：" + ttt.data.msg, "error");
          }
        })
      }).catch(() => { //点“取消”就执行catch()函数
        messageTip("取消批量删除", "warning");
      })
    },

    //用户在table表格中勾选或者取消勾选时，会触发执行该函数
    handleSelectionChange(rowItemArray) {
      this.clueIdArray = [];
      rowItemArray.forEach( rowItem => {
        this.clueIdArray.push(rowItem.id);
      })
    },

    //查看详情
    view(id) {
      console.log(id);
      this.$router.push("/dashboard/clue/detail/" + id);
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>